/**
 * Location
 */

 import consts from "../../../../../consts/consts";
 import Header from "../Header";
 import Footer from "../Footer";
 import React,{Component} from "react";

 class Location extends Component{
    handleOnChangeImage(){
//        var root = this.props.root,
//            data = this.props.data;
//        root.openDialog(consts.WIDGET_TYPE.PICTURE, true, data, true);
        const {data} = this.props;
        console.log("open dialog");
    }
    render(){
        const {type,data,timelines,selectedWidgetId,updateWidget,setState,selectContents} = this.props;
        let focus = (data.widget_id == selectedWidgetId);
        let content = "";
        if (data.url){
            content =
                <div className="location-container">
                    <img src={data.url} />
                </div>
        } else {
            content =
                <div style={{background: "#" + data.color || "000"}} className="location-container location-icon icon">
                    <i></i>
                    <span>{$._('navigation position')}</span>
                </div>
        }

        return (
            <div ref="content" className={"content-item " + (focus ? "focus " : " ") + (data.visible ? "unfold " : "fold ")} onClick={() => selectContents(data)}>
                <Header type={type} data={data} updateWidget={updateWidget} setState={setState}/>
                <div className="content">
                    {content}
                    <button onClick={this.handleOnChangeImage}>{$._("Replace")}{$._("Picture")}</button>
                </div>
                <Footer type={type} data={data} timelines={timelines} updateWidget={updateWidget} setState={setState} />
            </div>
        )
    }
 }

 module.exports = Location;
